<template>
	<view class="box">
		<!-- 状态空 -->
		<view class="kong_mt text-center" v-if="0">
			<image class="image_last" src="../../static/image/offerxq_img_k@2x.png" mode=""></image>
			<view class="last_text">暂无信息</view>
		</view>
		<view class="top_next flexs3">
			<view class="flexs1" >
				<view class="top_title">行业分类</view>	
				<image class="top_image"  v-if="hangye"  src="../../static/image/kqfx_ico_sl@2x.png" mode="" @click="choosehangyes"></image>
				<image class="top_image" v-else @click="choosehangye" src="../../static/image/kqfx_ico_xl@2x.png" mode=""></image>
			</view>
			<view class="flexs1" >
				<view class="top_title">发布时间</view>
				<image v-if="timeshow" class="top_image" src="../../static/image/kqfx_ico_sl@2x.png" @click="choosetimes" mode=""></image>
				<image v-else class="top_image" src="../../static/image/kqfx_ico_xl@2x.png" mode="" @click="choosetime"></image>
			</view>
		</view>
		<view class="kong_border"></view>
		<view class="center">
			<view class="center_list flexs2" v-for="(item,index) in resumeslist" :key="index" @click="tokechengg(item.id)">
				<image class="center_image" :src="picture.getImgUrl(item.head_image)?picture.getImgUrl(item.head_image):''" mode=""></image>
				<view class="center_right" :style="index==(resumeslist.length - 1) ? 'border-bottom-width: 0rpx;':''">
					<view class="zhichang_time">{{item.title}}</view>
					<view class="">
						<view class="center_study">上传者：{{item.author}}</view>
						<view class="flexs2">
							<view class="center_pay">已下载{{item.down_num}}次</view>
							<view class="cemter_last" @click.stop='download(item.id)'>
								<image src="../../static/image/fxzl_ico_xz@2x.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class='mask' v-if='shouwzhe' @click='hidemotify'></view>
		<!-- 发布时间 -->
		<view class="model" v-if="timeshow">
			<view class="time_center">
				<view class="right_box" v-for="(item,index) in choosetimearray" :key="index" @click="chooseborder1(index)">
					<view class="flexs2">
						<view class="right_list" :class="{'time_font':choose_right==index}">{{item}}</view>
						<view class="right_chexs" v-if="choose_right==index">
							<image src="../../static/image/ico_xz@2x.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 行业分类 -->
		<view class="model" v-if="hangyeshow">
			<view class="time_center">
				<view class="right_box" v-for="(item,index) in categorylist" :key="index" @click="chooseborder(index)">
					<view class="flexs2">
						<view class="right_list" :class="{'time_font':choose_left==index}">{{item.name}}</view>
						<view class="right_chexs" v-if="choose_left==index">
							<image src="../../static/image/ico_xz@2x.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {resumecate,resumeidnex,resumedownLoad} from '@/api/data.js'
	export default {
		data() {
			return {
				hangyeshow:false,
				timeshow: false,
				shouwzhe: false,
				hangye: false,
				choose_left: -1,
				choose_right: 1,
				choosetimearray:['发布时间','下载次数'],
				categorylist:[],
				resumeslist:[],
				page:1,
				limit:10,
				cate_id:'',
				choosesort:1,
			}
		},
		onLoad() {
			this._getcategory()
			//this._getresumes(this.page,this.limit,this.cate_id)
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.page = 1;
			this._getresumes(1,this.limit,this.cate_id);
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom(){
			this.page = this.page+1;
			this._getresumes(this.page,this.limit,this.cate_id);
		},
		methods: {
			_getcategory(){
				resumecate().then(res=>{
					if(res.code == 1){
						this.categorylist = res.data
						//this.cate_id=res.data[0].id
						console.log(this.cate_id)
						this._getresumes(1,this.limit,this.cate_id)
					}else{
						this.$msg(res.msg)
					}
				})
				
			},
			_getresumes(page,limit,cate_id){
				console.log("")
				let obj = {
					page:page,
					limit:limit,
					cate_id:cate_id,
					sort:this.choosesort  //1按照时间排序 2 按照下载量
				}
				resumeidnex(obj).then(res=>{
					if(res.code == 1){
						if(page == 1){
							this.resumeslist = res.data
						}else{
							this.resumeslist = this.resumeslist.concat(res.data) 
						}
						
					}else{
						this.$msg(res.msg)
					}
				})
			},
			download(id){
				var that = this
				let obj = {
					id:id
				}
				resumedownLoad(obj).then(res=>{
					if(res.data.code == 1){
						uni.downloadFile({
							url:this.picture.getImgUrl(res.data.download_src), //仅为示例，并非真实的资源
							success: (res) => {
								uni.saveFile({
									tempFilePath: res.tempFilePath,
									success: function(red) {
										that.luj = red.savedFilePath
										uni.showToast({
											icon:'none',
											title:'下载成功'+red.savedFilePath
										})
										// that.$api.msg(red.savedFilePath)
									}
								});
							}
						})
						// this.$api.msg(res.data.msg)
					}else{
						this.$msg(res.msg)
					}
				})
			},
			
			tokechengg(id) {//跳转详情
				uni.navigateTo({
					url:'jianlicenter?id='+id
				})
			},
			chooseborder(index) { //行业左边
				this.choose_left = index
				this.cate_id = this.categorylist[index].id
				this._getresumes(1,this.limit,this.cate_id)//每次切换也要重新获取数据
				setTimeout(() => {
					this.timeshow = false
					this.shouwzhe = false
					this.hangyeshow = false
					this.hangye =false
				}, 500)
			},
			chooseborder1(index) { //发布时间
				this.choose_right = index
				//1按照时间排序 2 按照下载量
				console.log(this.choose_right)
				this.choosesort =  Number(index)+ 1
				this._getresumes(1,this.limit,this.cate_id)//每次切换也要重新获取数据
				setTimeout(() => {
					this.timeshow = false
					this.shouwzhe = false
					this.hangyeshow = false
					this.hangye =false
				}, 500)
			},
			
			choosetime() { //时间显示
				this.timeshow = true
				this.shouwzhe = true
				this.hangyeshow = false
				this.hangye =false
			},
			choosetimes() { //时间消失
				this.timeshow = false
				this.shouwzhe = false
				this.hangye = false
				//this._getresumes(1,this.limit);
			},
			choosehangye(index) { //行业显示
				this.hangyeshow = true
				this.shouwzhe = true
				this.hangye=true
				this.timeshow = false
			},
			choosehangyes() {//行业消失
				this.hangyeshow = false
				this.shouwzhe = false
				this.timeshow = false
				this.hangye = false
			},
			hidemotify() { //遮罩
				this.shouwzhe = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top_next {
		width: 100%;
		line-height: 70rpx;
		font-size: 26rpx;
		background-color: #FFFFFF;
	}

	.top_title {
		margin-right: 8rpx;
		font-size: 26rpx;
	}

	.right_box {
		width: 100%;
		line-height: 100rpx;
		padding: 0 30rpx;
	}

	.top_kong {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}

	.image_last {
		width: 163rpx;
		height: 177rpx;
		margin-bottom: 16rpx;
	}

	.last_text {
		color: #666666;
		font-size: 26rpx;
	}

	.top_image {
		width: 16rpx;
		height: 10rpx;
	}

	.kong_border {
		width: 100%;
		height: 20rpx;
	}
	.right_chexs image {
		width: 26rpx;
		height: 18rpx;
	}
	/* cemter */
	.center {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding: 0 30rpx;
	}

	.center_pay {
		font-size: 22rpx;
		color: #999999;
	}

	.cemter_last image {
		width: 26rpx;
		height: 26rpx;
	}

	.center_study {
		margin: 6rpx 0;
		font-size: 24rpx;
	}

	.center_right {
		width: 475rpx;
		height: auto;
		border-bottom: solid 1rpx #e5e5e5;
		padding: 20rpx 0;
	}
	.top_titles {
		width: 400rpx;
		height: 40rpx;
		color: #333333;
		font-size: 28rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		/* -webkit-box-orient: vertical; */
		/* word-break: break-all; */
	}

	.center_image {
		width: 196rpx;
		height: 130rpx;
		border-radius: 10rpx;

	}

	.center_maozi {
		width: 28rpx;
		height: 26rpx;
		margin-right: 6rpx;
	}

	.fwt {
		font-size: 24rpx;
	}

	.kong_mt {
		margin-top: 120rpx;
	}

	.image_last {
		width: 163rpx;
		height: 177rpx;
		margin-bottom: 16rpx;
	}

	.last_text {
		color: #666666;
		font-size: 26rpx;
	}

	.top_title {
		margin-right: 8rpx;
		font-size: 26rpx;
	}

	/* shijian */
	.time_font {
		font-weight: bold;
	}

	.time_center {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		font-size: 28rpx;
	}

	/* model 行业分类 */
	.model {
		width: 100%;
		height: auto;
		color: #333333;
		font-size: 28rpx;
		position: absolute;
		top: 76rpx;
	}
	.mask {
		position: fixed;
		top: 200rpx;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.4);
	}
</style>
